<template>
	<!-- <view class="calendar-content" v-if="showCalendar"> -->
		<view>
		<view class="top flex flex-align-end flex-pack-center flex-warp">
			<view class="out-1 flex flex-align-center flex-pack-center" id="signIn">
				<view class="out-2 flex flex-align-center flex-pack-center">
					<view class="signBtn">
						<strong id="sign-txt">签到</strong>
						<span>积分<em id="sign-count">{{Integral}}</em>天</span>
					</view>
				</view>
			</view>
		</view>
		<view class="tips">签到成功获得10积分</view>
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :lunar="true"  :insert="true" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		<ad  unit-id='b2e841b02f5c44701d264c4326cd1187' type="card"></ad>
							<!-- 对话框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog"  @change="change">
			<view class="sign_tk" id="suc_tk">
	<view class="sign_suc">
		<view class="suc_title"></view>
		<view class="sign_con">
			<p>恭喜您</p>
			<p>{{msg}}</p>
		</view>

	</view>
</view>
		</uni-popup>
		</view>


</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import common from '@/common/common.js';
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
			components: {
		
			uniPopupDialog: uniPopupDialog
		},
		data() {
			return {
				showCalendar: true,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				msg:'',Integral:''
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
					// 页面打开自动打开对话框
			setTimeout(() => {
		
			 	common.requst('/api/applets/Signin', {userid:uni.getStorageSync("userid")}, 'post').then(res => {

                        console.log(res);
                        res=res. data;
                  
                        if (res.success == true) {
							this.msg=res.msg;
                 		this.$refs.popupDialog.open();
                        }else{
						this.msg=res.msg;
	                    this.$refs.popupDialog.open();
                        }
                    


                        });
		
			}, 500)
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date(), -30).fullDate
				this.info.startDate = getDate(new Date(), -60).fullDate
				this.info.endDate = getDate(new Date(), 30).fullDate
				this.info.selected = [
					// {
					// 	date: getDate(new Date(), -3).fullDate,
					// 	info: '打卡'
					// },
					// {
					// 	date: getDate(new Date(), -2).fullDate,
					// 	info: '签到',
					// 	data: {
					// 		custom: '自定义信息',
					// 		name: '自定义消息头'
					// 	}
					// },
					// {
					// 	date: getDate(new Date(), -1).fullDate,
					// 	info: '已打卡'
					// }
				]
			}, 2000)
		},onShow(){
	  let _this=this;
			uni.showLoading();
			uni.request({
					url: _this.URLs+ "/api/applets/GetUserUsersIntegral?id="+ uni.getStorageSync("userid"),
					success: resp => {
							console.log(resp);
						if (resp.statusCode == 200) {
							_this. Integral =resp.data.integral;
			
							}
								setTimeout(function(){
					uni.hideLoading();
				}, 100);//在此处延迟1秒再执行下一段代码块（调自己）
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
  },
		methods: {
			open() {
				this.$refs.calendar.open()
			},
			close() {
				console.log('弹窗关闭');
			},
			change(e) {
				console.log('change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// })
			},			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
	
				// 需要执行 done 才能关闭对话框
				done()
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}
.uni-calendar__header-btn-box,.uni-calendar__backtoday{
	display: none !important;
}
	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #2db7f5;
	}

	.word-btn--hover {
		background-color: #2db7f5;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}
	.top {
  width: 100%;
  height: 12rem;
  background: #2db7f5;
  margin-bottom: .7rem;
  overflow: hidden;
}
.top .out-1 {
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  background: rgba(255, 255, 255, 0.4);
  margin: 1rem auto 0 auto;
}
.top .out-1 .out-2 {
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  background: #ffffff;
  margin: 0 auto;
}
.top .out-1 .out-2 .signBtn {
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  border: 1px #2db7f5 solid;
}
.top .out-1 .out-2 .signBtn strong,
.top .out-1 .out-2 .signBtn span {
  display: block;
  width: 85%;
  margin: 0 auto;
  text-align: center;
  color: #2db7f5;
}
.top .out-1 .out-2 .signBtn strong {
  height: 3.5rem;
  line-height: 4.5rem;
  font-weight: 600;
  border-bottom: 1px #eee solid;
}
.top .out-1 .out-2 .signBtn span {
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: .9rem;
  line-height: 2rem !important;
}
.top .out-1:active {
  animation: sign .25s forwards;
  -webkit-animation: sign .25s forwards;
}
.tips {
  position: absolute;
  top: 10rem;
  z-index: 999;
  width: 100%;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  padding-bottom: .5rem;
}


.sign_tk{
	position: fixed;
	left: 50%;
	top:50%;
	width: 12rem;
	height:10rem;
	margin-left: -6rem;
	margin-top: -6rem; 
	background: #fff;
	-webkit-border-radius: 0.6rem;
	-moz-border-radius: 0.6rem;
	-ms-border-radius: 0.6rem;
	-o-border-radius: 0.6rem;
	border-radius: 0.6rem;
}
.sign_suc{
	width: 100%;
	position: relative;
	padding-top:2rem;
}
.suc_title{
	width: 130%;
	height: 3.8rem;
	background: url(/static/images/suc_title.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: -15%;
	top:-2rem;
}
.sign_con{
	width: 10rem;
	margin:0 auto;
	text-align: center;
	font-size:1.1rem;
	line-height: 2rem;
	padding:1.5rem 0 2rem 0;
}
.sign_con p{
	letter-spacing:0.2rem;
}

</style>